
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match( /print-pdf/gi ) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
    <div class="slides">
        <section>
            <h2>【js-task02】</h2>
            <h3>小课堂【萌新】常见Dom操作有哪些？</h3>
            <p>分享人：吴泽华</p>
        </section>
        <section>
            <p>目录</p>
            <p>1.背景介绍</p>
            <p>2.知识剖析</p>
            <p>3.常见问题</p>
            <p>4.解决方案</p>
            <p>5.编码实战</p>
            <p>6.扩展思考</p>
            <p>7.参考文献</p>
            <p>8.更多讨论</p>
        </section>
        <section>
            <h3>1.背景介绍</h3>
        </section>
        <section>
            <p>DOM（文档对象模型）是针对HTML 和XML 文档的一个API（应用程序编程接口）。DOM描
                绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于
                Netscape 及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正的跨
                平台、语言中立的方式。</p>
        </section>
        <section>
            <p>1998 年10 月DOM１级规范成为W3C 的推荐标准，为基本的文档结构及查询提供了接口。本章主
                要讨论与浏览器中的HTML页面相关的DOM1级的特性和应用，以及JavaScript 对DOM1级的实现。
                IE、Firefox、Safari、Chrome 和Opera 都非常完善地实现了DOM。</p>
        </section>
        <section>
            <h3>2.知识剖析</h3>
        </section>
        <section>
            <p>什么是DOM</p>
            <p>DOM 是 Document Object Model（文档对象模型）的缩写。
                DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
                在 HTML DOM中，所有事物都是节点。DOM 是被视为节点树的 HTML。</p>
        </section>
        <section>
            <p>DOM节点</p>
            <p>HTML 文档中的所有内容都是节点。整个文档是一个文档节点,每个 HTML 元素是元素节点，
                HTML 元素内的文本是文本节点，每个 HTML 属性是属性节点，注释是注释节点。</p>
        </section>
        <section>
            <p style="font-size:1.5rem;text-align:left;text-indent:3.5rem;">
                像是我们现在所看到的这个ppt，我们在编写时，会用到诸如&lt;body&gt;、&lt;head&gt;、&lt;section&gt;、&lt;p&gt;这些元素。
                如果把Web上的文档比作一座大厦，那么元素就是建造这座大厦的砖块，这些元素在在文档中的布局形成了文档的结构。元素可以包含其他的元素，在我们的ppt首页中，内容都被包含在在一个'&lt;section&gt;'元素的内部。而唯一没有被包含在其他元素中的唯一元素是'&lt;html&gt;'，他和我们的节点树的根元素，其他的所有元素都被包含在'&lt;html&gt;'中。
            </p>
            <img src="../img/js-02-常见DOM操作/111.png"  alt="" style="width:25vw"/>
        </section>
        <section>
            <p style="font-size:1.5rem;text-align:left;text-indent:3.5rem;">
                元素节点只是节点类型的一种。如果一份文档完全有一些空白元素构成，他将有一个结构，但这份文档本身将不会包含什么内容。
            </p>
            <p style="font-size:1.5rem;text-align:left;text-indent:3.5rem;">
                在我们的ppt首页中，'&lt;p&gt;'元素包含着文本’。他就是一个文本节点。在html文档里，文本节点总是被包含在元素节点的内部。
            </p>
        </section>
        <section>
            <p style="font-size:1.5rem;text-align:left;text-indent:3.5rem;">
                属性节点用来对元素做出更具体的描述。例如，几乎所有的元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西做出准确的描述：
                <br> '&lt;p title="a gentle reminder"&gt;这是一个带有温馨提示的p标签&lt;/p&gt;'
                <br> 在DOM中，title="a gentle reminder"是一个属性节点。因为属性总是被放在起始标签里，所以属性节点总是被包含在元素节点中。并非所有的标签都包含着属性，但是所有的属性都被元素包含。
            </p>
            <img src="../img/js-02-常见DOM操作/222.png" height="409" width="500"/></section>
        <section>

            <p>DOM常用操作</p>
            <p>查找节点</p>
            <p>新建节点</p>
            <p>添加节点</p>
            <p>删除节点</p>
            <p>修改节点</p>
            我们用到最多的是element类型，用于表现HTML元素，提供了对元素标签名、子节点及特性的访问。
        </section>
        <section>
            <p>DOM常用操作举例</p>
            <p>查找节点</p>
            <p>document.getElementById('id属性值');</p>
            返回拥有指定id的第一个对象的引用            <p>document/element.getElementsByClassName('class属性值');</p>
            返回拥有指定class的对象集合
        </section>
        <section>
            <p>新建节点</p>
            <p>document.createElement('元素名');</p>
            创建新的元素节点
            <p>document.createAttribute('属性名');</p>
            创建新的属性节点
            <p>document.createTextNode('文本内容');</p>
            创建新的文本节点
            <p>document.createComment('注释节点');</p>
            创建新的注释节点
            <p>document.createDocumentFragment( );</p>
            创建文档片段节点
        </section>
        <section>
            <p>DOM常用操作</p>
            <p>添加节点</p>
            <p>常用来添加文本节点element.innerHTML='新增文本内容'</p>
            <img src="../img/js-02-常见DOM操作/333.png" height="259" width="731"/></section>
        <section>
            <p>DOM常用操作</p>
            <p>删除节点</p>
            <p>parentNode.removeChild( existingChild );</p>
            删除已有的子节点，返回值为删除节点
            <p>element.removeAttribute('属性名');</p>
            删除具有指定属性名称的属性，无返回值
            <p>element.removeAttributeNode( attrNode );</p>
            删除指定属性，返回值为删除的属性
        </section>
        <section>
            <p>DOM常用操作</p>
            <p>修改节点</p>
            <p>添加属性节点，修改属性值：</p>
            element.setAttribute( attributeName, attributeValue );
            <img src="../img/js-02-常见DOM操作/444.png" height="356" width="893"/></section>
        <section>
            DOM事件
            <p>允许 JavaScript 对 HTML 事件作出反应</p>
            <p>onclick 事件——当用户点击时</p>
            <p>onload 事件——用户进入</p>
            <p>onunload 事件——用户离开</p>
            <p>onmouseover事件——鼠标移入</p>
            <p>onmouseout事件——鼠标移出</p>
            <p>onmousedown事件——鼠标按下</p>
            <p>onmouseup 事件——鼠标抬起</p>
        </section>
        <section>
            <h3>3.常见问题</h3>
        </section>
        <section>
            <p>如何通过class和tag调用元素?如何对其设置属性？</p>
        </section>
        <section>
            <h3>4.解决方案</h3>
        </section>
        <section>
            <p>一个页面中常常有多个class相同的元素，也有多个标签相同的元素，在调用时方法如下</p>
            <img src="../img/js-02-常见DOM操作/555.png" height="338" width="778"/></section>
        <section>
            <h3>5.编码实战</h3>
        </section>
        <!--<section>-->
            <!--<p>我们运行一下上一页给出的代码，来用DOM改变一下HTML的内容和样式。</p>-->
        <!--</section>-->
        <section>
            <h3>6.扩展思考</h3>
        </section>
        <section>
            <p>Html5添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性，
                这个属性始终会引用DOM中当前获得了焦点的元素。
                另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。
                我们可以去学习HTML5中的一些新内容。</p>
        </section>
        <section>
            <h3>7.参考文献</h3>
        </section>
        <section>
            <p>参考一：《JavaScript高级程序设计》</p>
            <p>参考二：<a href="http://blog.csdn.net/ouyangyanlan/article/details/50217065" target="_blank">DOM树知识点梳理</a></p>
        </section>
        <section>
            <h3>8.更多讨论</h3>
        </section>
        <!--<section>-->
            <!--<p>如何合理的写HTML内容和用DOM对其进行操作？</p>-->
        <!--</section>-->
        <section>
            <h4>鸣谢</h4>
            <p>感谢大家观看</p>
            <p><small>BY : 吴泽华</small></p>
        </section>
    </div>
</div>

<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>

<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }
    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [
            { src: '../plugin/markdown/marked.js' },
            { src: '../plugin/markdown/markdown.js' },
            { src: '../plugin/notes/notes.js', async: true },
            { src: '../plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
        ]
    });
</script>
</body>
</html>
Contact GitHub API Training Shop Blog About
© 2016 GitHub, Inc. Terms Privacy Security Status He